{% extends "base.html" %}

{% block title %}RapidShare Downloader (codename Petra){% endblock %}

{% block jscss %}
<script type="text/javascript" src="/static_media/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/static_media/js/bramus/jsProgressBarHandler.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
	progressbar = new JS_BRAMUS.jsProgressBar(
		$('progressbar'),
		0,
		{
			barImage: Array(
				'/static_media/images/bramus/percentImage_back4.png',
				'/static_media/images/bramus/percentImage_back3.png',
				'/static_media/images/bramus/percentImage_back2.png',
				'/static_media/images/bramus/percentImage_back1.png')
		}
	);
},false);

function getDownloadStatus(id){
	var request = new Ajax.Request('/downloads/'+id+'/status', { method:'get',
				parameters: {enc: "json"},
				onSuccess: function(transport){
					var json = transport.responseText;
					obj = json.evalJSON();
					updateDownloadStatus(id,obj);}
				});
	return false;
}

function updateDownloadStatus(id, obj){
	var status = obj[0].fields.progress;

	progressbar.setPercentage(status);
	setTimeout("getDownloadStatus("+id+")",5000);
}
</script>
{% endblock %}

{% block content %}
	<table border="0" cellpadding="10" cellspacing="0">
		<theader>
			<td>Name</td>
			<td>Download</td>
			<td>Queue date</td>
			<td>Priority</td>
			<td>Status</td>
			<td>Download progress</td>
		</theader>
		<tr>
			<td>
				{{download.name}}
			</td>
			<td>
				{{download.url}}
			</td>
			<td>
				{{download.start_date}}
			</td>
			<td>
				{{download.priority}}
			</td>
			<td>
				{{download.status}}
			</td>
			<td>
				{% if download.downloadprogress %}
				<div style="widht:100px">
				<span id="progressbar"></span>
				</div><script>getDownloadStatus({{download.id}})</script>
				{% else %}
				N/A
				{% endif %}
			</td>
		</tr>
	</table>
{% endblock %}

{% block footer %} <a href="/">Download list</a> {% endblock %}
